<template>
	<view class="headerMain">
		<!-- <view class="status_bar" style="height: var(--status-bar-height); "></view> -->
		<view class="header_bar header_fixed" :style="'background:'+headerBg"
		:class="{'header_bg' : heightTop > 20}">
			<view class="header">
				<view class="header-back" 
					v-if="backColor" 
					:style="'background: url(../../static/public/icon-'+backColor+'-back.png);background-size: 50rpx 50rpx;background-repeat: no-repeat;background-position: 10rpx center;'"
					@tap.stop="goBack()">
				</view>
				<view class="header-title" :style="'color:'+titleColor">
					{{ headerTitle }}
				</view>
				<view class="header-right" @tap.stop="goNext()">
					<view class="header-right__title" v-if="rightTitle" :style="'color:'+rightColor">
						{{ rightTitle }}
					</view>
					<image v-if="rightImg" :src="rightImg" mode=""></image>
				</view>
			</view> 
		</view> 
	</view>
</template>

<script>
	export default {
		props:{
			headerBg: {
				type: String,
				default: ''
			},
			heightTop: {
				type: Number,
				default: 0
			},
			headerTitle: {
				type: String,
				default: ''
			},
			backColor: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: 'black'
			},
			rightTitle: {
				type: String,
				default: ''
			},
			rightColor: {
				type: String,
				default: 'black'
			},
			rightImg: {
				type: String,
				default: ''
			},
		},
		data(){
			return{
				tops: '',
				height: '',
			}
		},
		mounted() {
			this.init();
		},
		created() {
		},
		methods: {
			init(){
				uni.getSystemInfo({
					success: (e) => {
						this.tops = e.statusBarHeight;
						this.height = (e.statusBarHeight) * 2;
					}
				})
				// console.log("tops：",this.tops,"---height：",this.height,);
			},
			// 返回
			goBack(){
				console.log("返回事件");
				let pages = getCurrentPages();
				console.log("pages：",pages.length);
				if (pages.length > 1) {
					uni.navigateBack(1)
					return
				}else{
					let url = '/pages/index/index';
					setTimeout(() => {
						uni.redirectTo({
							url,
							animationType: 'zoom-fade-out',
							fail() {
								console.log('跳转失败,尝试Tab跳转,url: ' + url)
								uni.switchTab({
									url,
									fail() {
										console.log('Tab跳转失败,url: ' + url)
									},
								})
							},
						})
					}, 1000)
				}
				// let curRoute = pages[pages.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
				// console.log("curRoute：",curRoute);
			},
			// 右上角下一页
			goNext(){
				console.log("右上角下一页事件");
				this.$emit('goNext');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header_fixed{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	.header_bar{
		/* #ifdef APP-PLUS */
		padding-top:var(--status-bar-height);
		/* #endif */
	}
	.header_bg{
		background: #ffffff;
	}
	.header{
		width: 100%;
		position: relative;
		padding: 3% 0;
		font-weight: 500;
		box-sizing: border-box;
		border: none;
		height: 88rpx;
		z-index: 9;
		&-back{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100rpx;
			height: 88rpx;
			z-index: 9;
		}
		&-title{
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			letter-spacing: 1px;
			text-align: center;
			margin: auto;
			image{
				width: 84px;
				height: 25px;
			}
		}
		&-right{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			right: 20rpx;
			top:30rpx;
			&__title{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
			}
			image{
				width: 44rpx;
				height: 44rpx;
				z-index: 9;
				margin-left: 8rpx;
			}
			
		}
	}
	
</style>